<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name: "UserList",
  data(){
    return {
      total:0
      ,pageSize:2
      ,currentPage:1
      ,tableData:[
        {
          "id": 1,
          "name": "张三",
          "password": "123",
          "gender": "男",
          "birthday": "2000年02月02日",
          "age": 24,
          "classInfo": {
            "id": 1,
            "name": "一年级"
          }
        },
        {
          "id": 2,
          "name": "张四",
          "password": "123",
          "gender": "男",
          "birthday": "2001年02月02日",
          "age": 23,
          "classInfo": {
            "id": 2,
            "name": "二年级"
          }
        },
      ]
    }
  }
  ,methods:{
    handleCurrentChange(){
      // console.log(this.currentPage)
      this.findAll()
    }
    ,handleSizeChange(){
      this.findAll()
    }
    ,handleClick(id){
      // console.log('跳转:'+id)
      // 携带id 跳转到 /userList/userUpdate/id
      // $router 全局路由对象
      this.$router.push(`/userList/userUpdate/${id}`)
    }
    ,findAll(){
      axios.get(`http://localhost:8080/user2/${this.currentPage}/${this.pageSize}`)
          .then(result=>{
            console.log(result.data)
            this.tableData = result.data.list
            this.total = result.data.total

          })
    }
    ,deleteUser(id){
      // console.log(id)
      axios.delete(`http://localhost:8080/user2/${id}`)// `` 模版字符串 可以在这个字符串中 直接使用${变量}
          .then(result=>{
            console.log(result)
            if(result.data.code == 200){
              //删除成功
              ElMessage({
                message: result.data.msg,
                type: 'success',
              })
              this.findAll()
            }else{
              ElMessage({
                message: result.data.msg,
                type: 'warning',
              })
            }
          })
    }
  }
  ,mounted() {
    this.findAll()
  }
}
</script>
<template>
  <el-table :data="tableData" style="width: 60%">
    <el-table-column fixed prop="id" label="编号" width="120" />
    <el-table-column prop="name" label="姓名" width="120" />
    <el-table-column prop="gender" label="性别" width="120">
      <template #default="scope"> <!--
        可以用来绑定值  # @ : 都是简写
          : v-bind 的简写 绑定数据
          @ v-on 的简写 绑定函数
          # v-slot 的简写  插槽
          scope 相当于 tableData的整个域数据 scope.row 当前行的数据
      -->
        <el-tag type="primary" v-if="scope.row.gender=='男'">{{scope.row.gender}}</el-tag>
        <el-tag type="danger" v-else>{{scope.row.gender}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="birthday" label="出生日期" width="200" />
    <el-table-column prop="age" label="年龄" width="120" />
    <el-table-column prop="classInfo.name" label="年级" width="120" />
    <el-table-column fixed="right" label="Operations" min-width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="handleClick(scope.row.id)">
          Detail
        </el-button>
        <el-button link type="primary" size="small" @click="deleteUser(scope.row.id)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[1, 2, 3, 4]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />
  <router-view/>
</template>
<style scoped>

</style>